<template>
    <div>

        <el-container>
            <el-header></el-header>
            <el-main>
                <el-card class="box-card">
                <div slot="header" class="title">
                    <span>秀秀秀注册</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                    <el-form label-width="80px" :model="user" :rules="rules" ref="myform">
                        <el-form-item label="名称" prop="username">
                            <el-input size="mini" v-model="user.username" ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input size="mini" v-model="user.password" ></el-input>
                        </el-form-item>
                        <el-form-item label="确认" prop="password2">
                            <el-input size="mini" v-model="user.password2" ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="submit">注册</el-button>
                            <el-button type="warning" size="small" @click="resetForm('myform')">重置</el-button>
                            <el-button type="danger" size="small" >取消</el-button>

                        </el-form-item>
                    </el-form>
            </el-card>
            </el-main>
            <el-footer></el-footer>
        </el-container>
    </div>

</template>

<script>
    export default {
        name: "Register",
        data(){
            let checkname = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('姓名不能为空'));
                }
                setTimeout(() => {
                    if (value.length<2||value.length>8) {
                        callback(new Error('请输入2-8之间的'));
                    } else {
                        callback();//回调函数
                    }
                }, 1000);
            };

            let checkpass = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('密码不能为空'));
                }
                setTimeout(() => {
                    if (value.length<2||value.length>8) {
                        callback(new Error('请输入2-8之间的'));
                    } else {
                            callback();
                        }

                }, 1000);
            };

            let checkpass2 = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('密码不能为空'));
                }
                setTimeout(() => {
                    if (value!=this.user.password) {
                        callback(new Error('俩次密码不同'));
                    } else {
                        callback();
                    }

                }, 1000);
            };



            return{
                user:{
                    username:"",
                    password:"",
                    password2:""
                },
                rules: {
                    username: [
                        { validator: checkname, trigger: 'blur' }
                    ],
                    password: [
                        { validator: checkpass, trigger: 'blur' }
                    ],
                    password2: [
                        { validator: checkpass2, trigger: 'blur' }
                    ]
                },
            };

        },
        methods:{
            //验证
            submit(){
                this.$refs.myform.validate((valid) => {
                    if (valid) {
                        alert('你好呀');
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
    }
</script>

<style scoped>
    .el-card{
        width: 400px;
        margin: 20px auto;
    }
    .title{
        text-align: center;
    }
    .el-form{
        width: 300px;
        margin-left: 15px;
    }

</style>